<template>
  <div class="card" style="width: 300px; z-index: 100;">

    <div>

      <div>
        <textarea  v-model="areaMsgs" id="msgArea" rows="25" style="width: 100%;"  readonly></textarea>
      </div>
    </div>
    <div>
      <div>
        <input type="text" v-model="content">
        <button class="btn btn-primary" v-on:click="sendMessage()" @keyup.enter="sendMessage()">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "messagelist",
  data() {
    return {
      messages: [{'username': "陈锦银", 'content': "大家好, 欢迎来到DC教育直播平台。"}],
      username: "",
      content:"",
      areaMsgs: ""
    };
  },
  created() {
    this.keyupEnter();
  },

  methods: {
    keyupEnter(){
      document.onkeydown = e =>{
        let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13) {
          console.log('enter')
          this.sendMessage()
        }
      }
    },

    sendMessage() {
      let room = localStorage.classroomName;
      if (room && this.content) {
        console.log('msgList send: ' + room + ' ' + this.content);
        this.$emit('sendMessage', room, this.content);
        this.content = "";
      }
    },

    gotMsg(message) {
      this.messages.push(message);
      this.areaMsgs = this.areaMsgs + message.username + ": " + message.content + "\n";
      let textarea = document.getElementById('msgArea');
      textarea.scrollTop = textarea.scrollHeight;
    },

    listMessages(messages) {
      this.messages.length = 0;
      this.messages.push(...messages);
    }
  }
};
</script>

<style scoped>

</style>